<template>
    <div>
        <div class="announcement-top-layout menu-top">
            <!-- <div class="gsname">简单竟戈网络科技有限公司</div> -->
            <!-- logo begin-->
            <a class="a-logo" title="简单约玩" href="#"></a>
            <!-- logo end-->

            <!-- menu begin -->
            <ul class="a-menu">
                <router-link tag="li" :to="{path:'/'}"><a>首页</a></router-link>
                <!-- <div class="router-div">
                    <router-link tag="li" :to="{path:'/disputeHandling'}"><a title="纠纷处理">纠纷处理</a></router-link>
                </div>
                <div class="router-div">
                    <router-link tag="li" :to="{path:'/tutelage'}"><a title="家长监护">家长监护</a></router-link>
                </div>
                <div class="router-div">
                    <router-link tag="li" :to="{path:'/about'}"><a title="关于我们">关于我们</a></router-link>
                </div> -->
                <div class="router-div" @click="headTit(1)">
                    <router-link tag="li" :to="{path:'/playAroundWith',query:{type:1}}"><a title="约陪玩">约陪玩</a></router-link>
                </div>
                <div class="router-div" @click="headTit(2)">
                    <li><a class="download" title="充值">充值</a></li>
                </div>
                <router-link class="router-div" tag="li" :to="{path:'/download'}"><a title="APP下载">APP下载</a></router-link>
                <div class="router-div" @click="headTit(4)">
                    <li><a class="download" title="申请入驻">申请入驻</a></li>
                </div>
            </ul>
            <!-- menu end -->

            <!-- search begin -->
            <div class="search-layout">
                <input class="search-input" v-model="searchVal" type="text" placeholder="搜索昵称/UID/靓号" @keyup.enter="search()">
            </div>
            <!-- search end -->

            <!-- feature-group  begin -->
            <ul class="feature-group">
                <li><a class="message-iconD" @click="leftIndex = 6">消息</a></li>
                <li><a class="a-user-iconD" v-if="detailNull == false" @click="islogin = true">登录/注册</a></li>
                <li v-if="detailNull">
                    <div class="a-user-icon-ed">
                        <img :src="$imgPath(detailObj.headImg)">
                        <i></i>

                        <!-- userInfo begin -->
                        <div class="userInfo">
                            <div class="userInfo-msg">
                                <div class="userInfo-img">
                                    <img :src="$imgPath(detailObj.headImg)">
                                    <span class="loginOut" @click="loginOut()">退出</span>
                                </div>
                                <div class="userInfo-name">
                                    <span>{{detailObj.nickname}}</span>
                                    <i class="she" v-if="detailObj.sex == 2">{{detailObj.age}}</i>
                                    <i class="nan" v-else-if="detailObj.sex == 1">{{detailObj.age}}</i>
                                    <label>
                                        UID:{{detailObj.code}}
                                        <!-- <i></i> -->
                                    </label>
                                </div>
                                <div class="userInfo-VIP">
                                    <!-- <label class="VIP">VIP2</label>
                                    <label class="LV">LV12</label> -->
                                    <label class="approve">{{detailObj.validIdentity ? '已认证' : '未认证'}}</label>
                                    <label class="bound">{{detailObj.phone ? '已绑定' : '未绑定'}}</label>
                                </div>
                                <!-- <div class="userInfo-EXP">
                                    <div class="userInfo-EXP-layout">
                                        <div class="userInfo-EXP-now">
                                            VIP2
                                        </div>

                                        <div class="userInfo-EXP-plan">
                                            <div class="userInfo-EXP-plan-num" style=" width: 45%;"></div>
                                            <div class="userInfo-EXP-plan-node" style=" left: 40%;"></div>
                                            <div class="userInfo-EXP-plan-value">
                                                450/1000
                                            </div>
                                        </div>

                                        <div class="userInfo-EXP-future">
                                            VIP3
                                        </div>
                                    </div>

                                    <div class="userInfo-EXP-layout">
                                        <div class="userInfo-EXP-now">
                                            LV2
                                        </div>

                                        <div class="userInfo-EXP-plan">
                                            <div class="userInfo-EXP-plan-num" style=" width: 45%;"></div>
                                            <div class="userInfo-EXP-plan-node" style=" left: 40%;"></div>
                                            <div class="userInfo-EXP-plan-value">
                                                450/1000
                                            </div>
                                        </div>

                                        <div class="userInfo-EXP-future">
                                            LV3
                                        </div>
                                    </div>
                                </div> -->
                            </div>

                            <div class="Wallet-layout">
                                <div class="Wallet">
                                    <div class="Wallet-title">
                                        我的钱包
                                    </div>
                                    <div class="Wallet-msg">
                                        <label class="balance">余额：￥{{moneyObj.recharge}}元</label>
                                        <label class="diamond">钻石：{{moneyObj.credits}}</label>
                                        <label class="recharge">
                                            <router-link tag="a" :to="{path:'/topUp',query:{type:2,tabIndex:0}}">充值</router-link>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="user-operation">
                                <ul>
                                    <li class="personal-center">
                                        <a>
                                            <router-link tag="label" :to="{name:'center',query:{leftIndex:2}}">个人中心</router-link>
                                        </a>
                                    </li>
                                    <li class="order-management">
                                        <a @click="leftIndex=0">
                                            <label>订单管理</label>  
                                            <!-- <router-link tag="label" :to="{name:'center',query:{leftIndex:0}}">订单管理</router-link> -->
                                        </a>
                                    </li>
                                    <li class="setfamily">
                                        <a @click="leftIndex=7">
                                            <label>设置资料</label> 
                                            <!-- <router-link tag="label" :to="{name:'center',query:{leftIndex:7}}">设置资料</router-link> -->
                                        </a>
                                    </li>
                                    <li class="pupil-sitter">
                                        <a>
                                            <router-link tag="label" :to="{name:'applyForService',query:{type:4}}">申请陪玩师</router-link>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- userInfo end -->
                    </div>
                </li>
            </ul>
            <!-- feature-group  end -->
        </div>
        <div class="container">
            <div class="left-menu">
                <div class="head">
                    <img :src="$imgPath(detailObj.headImg)">
                    <div class="name clearfix">
                        <span>{{detailObj.nickname}}</span>
                        <!-- <i class="she">19</i> -->
                        <span class="sex1" v-if="detailObj.sex == 1">{{detailObj.age}}</span>
                        <span class="sex2" v-if="detailObj.sex == 2">{{detailObj.age}}</span>
                    </div>
                    <div class="UID">
                        UID:{{detailObj.code}}
                        <!-- <i></i> -->
                    </div>
                    <div class="game">
                        <label class="game1" v-for="(item,index) in serviceList" :key="index">
                            <img :src="$imgPath(item.serviceLogo)" alt="">
                        </label>
                    </div>

                    <div class="FS">
                        <label>{{detailObj.followNum}}关注</label>
                        <label>{{detailObj.fansNum}}粉丝</label>
                    </div>
                </div>

                <div class="my">
                    <div class="my-title" @click="headTit(2)">
                        <label>我的钱包</label>
                       <!--  <router-link tag="a" :to="{path:'/topUp'}">充值</router-link> -->
                    </div>
                    <ul class="my-sta">
                        <li>
                            <i class="my-sta1"></i>
                            <span>余额：￥{{moneyObj.recharge}}</span>
                            <em @click="goTopUp(0)">充值</em>
                        </li>
                        <li>
                            <i class="my-sta2"></i>
                            <span>钻石：{{moneyObj.credits}}</span>
                            <em @click="goTopUp(1)">充值</em>
                        </li>
                        <li>
                            <i class="my-sta3"></i>
                            <span>收益：￥{{moneyObj.income}}</span>
                            <em @click="leftIndex=9,TxActive=1">提现</em>
                        </li>
                    </ul>
                </div>
                <div class="menu">
                    <ul>
                        <li v-for="(item,index) in leftTab" :key="index">
                            <a :class="[leftIndex == index ? 'active' : '']" @click="leftIndex = index">
                                <i :class="item.class"></i>
                                <label>{{item.name}}</label>
                            </a>
                        </li>
                       
                    </ul>
                </div>
            </div> 
            <centerService v-if="leftIndex == 2" :serviceList="serviceList" :detailObj="detailObj" @serviceZt="serviceZt"></centerService>
            <centerTx v-else-if="leftIndex == 9" :TxActive="TxActive" @changeTxActive1="changeTxActive"></centerTx>
            <centerFocusOn v-else-if="leftIndex == 5" :detailObj="detailObj"></centerFocusOn>
            <centerCoupons v-else-if="leftIndex == 3" @lindex="balancee($event)"></centerCoupons>
            <centerGift v-else-if="leftIndex == 4"></centerGift>
            <centerMessage v-else-if="leftIndex == 6" @leftIndexTab="leftIndexTab"></centerMessage>
            <!-- <centerMessage1></centerMessage1> -->
            <!-- <centerUserData v-else-if="leftIndex == 8"></centerUserData> -->
            <centerUserInfo v-else-if="leftIndex == 7"></centerUserInfo>
            <centerPersonal :detailObj="detailObj" :moneyObj="moneyObj" :wxCode="wxCode" :tabActive="tabActive" v-else-if="leftIndex == 8" @wallet="wallet" @lindex="balancee($event)"></centerPersonal>          
            <centerOrder v-else-if="leftIndex == 0" :detailObj="detailObj" :moneyObj="moneyObj"></centerOrder>
            <!-- 账号管理 -->
            <centerAccoutManger v-else-if="leftIndex == 1" :detailObj="detailObj" @lindex="balancee($event)"></centerAccoutManger>
        </div>
    </div>
</template>
<script>
import apiHttp from '../api/index'
import centerService from './centerChild/centerService'
import centerTx from './centerChild/centerTx'
import centerFocusOn from './centerChild/centerFocusOn'
import centerCoupons from './centerChild/coupons'
import centerGift from './centerChild/centerGift'
import centerMessage from './centerChild/centerMessage'
import centerMessage1 from './centerChild/centerMessage1'
import centerUserInfo from './centerChild/userInfo'
import centerPersonal from './centerChild/centerPersonal'
import centerOrder from './centerChild/centerOrder'
import centerAccoutManger from './centerChild/accoutManger'
import centerZf from './centerChild/centerZf'
export default {
    data(){
        return{  
            TxActive:0,   
            tabActive:0,   
            wxCode:this.$route.query.code ? this.$route.query.code : '',                           
            leftTab:[
                {
                    class:'WDDD',
                    name:'我的订单'
                },
                {
                    class:'WDZH',
                    name:'我的账户'
                },
                {
                    class:'FWGL',
                    name:'服务管理'
                },
                {
                    class:'WDYHJ',
                    name:'我的优惠券'
                },
                {
                    class:'WDLW',
                    name:'我的礼物'
                },
                {
                    class:'WDGZ',
                    name:'我的关注'
                },
                {
                    class:'XXZX',
                    name:'消息中心'
                },
                {
                    class:'GRZL',
                    name:'个人资料'
                },
                {
                    class:'AQSZ',
                    name:'安全设置'
                }
            ],
            leftIndex:this.$route.query.leftIndex ? this.$route.query.leftIndex : 0,
            detailObj:{},           // 人物信息
            moneyObj:{},            // 钱包明细
            serviceList:[],         // 服务列表
            detailNull:false,
            searchVal:'',           // 搜索文字
            isAccout:false         //是否显示账号管理页面
        }
    },
    components:{
        centerService,
        centerTx,
        centerFocusOn,
        centerCoupons,
        centerGift,
        centerMessage,
        centerMessage1,
        centerUserInfo,
        centerPersonal,
        centerOrder,
        centerAccoutManger,
    },
    mounted(){
        this.verify()
    },
    methods:{
        // 设置导航栏选择效果
        headTit(type){
            if(type == 2 || type == 4){
                 apiHttp.apiLogin.verify('',resp=>{
                     if(resp.code == 200){
                         if(resp.data != 1){
                            this.$Message.error('请您先登录')
                            this.islogin = !this.islogin
                         }else{
                            localStorage.setItem('tabIndex',type)
                            if(type == 2){
                                this.$router.push({
                                    name:'topUp',
                                    query:{
                                        tabIndex:0,
                                        type:2,
                                    }
                                })
                            }else if(type == 4){
                                this.$router.push({
                                    name:'applyForService',
                                    query:{
                                        type:4,
                                        tabIndex:0
                                    }
                                })
                            }
                            
                         }
                     }
                })
            }
        },
        // 判断token是否有效
        verify(){
            apiHttp.apiLogin.verify('',resp=>{
                if(resp.code == 200){
                    if(resp.data == 1){
                        this.screening()
                        this.getUserWalletDetail()
                        this.myServerList()
                    }else{
                        localStorage.removeItem('token')
                    }
                }
            })
        },
        // 获取个人资料
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.detailObj = resp
                this.detailNull = true
            })
        },
        // 退出登陆
        loginOut(){
            apiHttp.apiCenter.logout('',resp=>{
                if(resp.code == 200){
                    localStorage.removeItem('token')
                    this.detailObj = {}
                    this.detailNull = false
                    if(this.$route.path == '/center'){
                        this.$router.push({
                            name:'index'
                        })
                    }
                    this.$Message.success('退出登陆成功')
                }
            })
        },
        // 钱包详情
        getUserWalletDetail(){
            apiHttp.apiCenter.getUserWalletDetail('',resp=>{
                if(resp.code == 200){
                    this.moneyObj = resp.data
                }
            })
        },
        // 我自己的服务
        myServerList(){
            apiHttp.apiCenter.myService('',resp=>{
                if(resp.code == 200){
                    this.serviceList = resp.data
                }
            })
        }, 
        // 接受子组件的值
        leftIndexTab(index){
            this.leftIndex = index
        },
        // 搜索
        search(){
            if(this.searchVal != ''){
                let routeData = this.$router.resolve({
                    path: '/search',
                    query:{
                        name:this.searchVal
                    }
                })
                window.open(routeData.href, '_blank')
            }
        },
        // 刷新钱包接口
        wallet(){
            this.getUserWalletDetail()
        },
        // 一键上下线刷新服务
        serviceZt(){
            this.screening()
            this.myServerList()
        },
        //接收明细组件中余额提现和收益提现按钮的传值,接收明细组件中查看优惠券按钮的传值
        balancee(val){                    
            this.leftIndex = val.type
            this.TxActive = val.index
        }, 
        changeTxActive(index){
            this.TxActive = index
        },
        //跳转到充值页面
        goTopUp(type){
            let tabIndex = '';
            if(type==0){
                tabIndex = 0;
            }else if(type==1){
                tabIndex = 1;
            }
            this.$router.push({
                name:'topUp',
                query:{tabIndex:tabIndex}
            })
        },
        // 子组件调用父组件方法     
        userDetail(){
            this.screening()
        },
        // 认证tab
        tabActiveType(index,tab){
            this.leftIndex = index
            this.tabActive = tab
        }
    }
}
</script>
<style scoped>
input::-webkit-input-placeholder {
    font-size: 14px;
}
.router-div{
    display: inline-block;
    float: left;
}
.userInfo{
    left: -380px;
}
</style>

